<!doctype html>
<html>
<head>
	<meta charset='utf-8'/>
	<link rel="stylesheet" type="text/css" href="css/toolbar.css">
</head>
<body style='height:3000px'>
	<section class='toolbar'>
		<a href="javascript:;" class='toolbar_item toolbar_item_advice'>
			<div class='toolbar_item_text'></div>
		</a>
		<a href="javascript:;" class='toolbar_item toolbar_item_mobile'>
			<div class='toolbar_item_text'></div>
		</a>
		<a href="javascript:;" class='toolbar_item toolbar_item_wechat'>
			<div class='toolbar_item_text'></div>
		</a>
		<a href="javascript:;" class='toolbar_item toolbar_item_top' id='top'>
			<div class='toolbar_item_text'></div>
		</a>
	</section>

	<script type="text/javascript">
		window.onload = function(){
			var top = document.getElementById('top');
			top.addEventListener('click',function(event){
				var stop = document.body.scrollTop;
				scrollToTop(stop/50,top);
			},false);

			window.onscroll = function(){
				var s = document.documentElement.scrollTop || document.body.scrollTop;
				if(s > 50){
					top.style.display = 'block';
				}else{
					top.style.display = 'none';
				}
			}
		};

		function scrollToTop(dec,top){
			var scroll = setInterval(function(){
				document.body.scrollTop -= dec;
				if(document.body.scrollTop == 0){
					clearInterval(scroll);
				}
			},1);
		}
		
	</script>
</body>
</html>